import { useForm } from "antd/es/form/Form";
import type { Role } from "../utils/role";
import { useEffect } from "react";
import { Button, Form, Input, InputNumber, message, Modal, Select } from "antd";


interface RoleEditModalProps {
    visible: boolean;
    onCancel: () => void;
    onSave: (role: Role) => void;
    role: Role | undefined;
    loading: boolean;
}

export default function RoleEditModal({ visible, onCancel, onSave, role, loading }: RoleEditModalProps) {
    // 定义表单实例
    const [form] = useForm<Role>()

    // 初始化组件
    useEffect(() => {
        if (visible && role) {
            form.setFieldsValue(role);
        } else {
            form.resetFields();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [visible, role]);

    const handleSave = async () => {
        try {
            const roleData = await form.validateFields();
            // 保存角色数据，如果角色已存在则更新，否则新增
            onSave({ ...role, ...roleData });
        } catch {
            message.error("表单验证失败");
        }
    };

    return <Modal
        title={role ? "编辑角色" : "新增角色"}
        open={visible}
        onCancel={onCancel}
        footer={[
            <Button key="cancel" onClick={ onCancel }>
                取消
            </Button>,
            <Button key="save" type="primary" loading={ loading } onClick={ handleSave }>
                保存
            </Button>,
        ]}
        width={600}
        destroyOnHidden
    >
        <Form  
            form={ form }
            layout="vertical"
            initialValues={{
                status: 1,
                isSystem: 0,
                sort: 0,
                deleted: false,
            }}
            onFinish={ handleSave }
            autoComplete="off"
            preserve={ false }
            >
            <Form.Item
                name="code"
                label="角色编码"
                rules={[{required: true, message: "请输入角色编码"}] }
            >
                <Input placeholder="请输入角色编码" />
            </Form.Item>
            <Form.Item
                name="name"
                label="角色名称"
                rules={[{required: true, message: "请输入角色名称"}] }
            >
                <Input placeholder="请输入角色名称" />
            </Form.Item>
            <Form.Item
                name="description"
                label="描述"
                rules={[{required: true, message: "请输入描述"}] }
                >
                <Input.TextArea placeholder="请输入描述" />
            </Form.Item>
            <Form.Item
                name="status"
                label="状态"
                rules={[{required: true, message: "请选择状态"}] }
                >
                <Select placeholder="请选择状态">
                    <Select.Option value={1}>启用</Select.Option>
                    <Select.Option value={0}>禁用</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item
                name="isSystem"
                label="是否系统角色"
                rules={[{required: true, message: "请选择是否系统角色"}] }
                >
                <Select placeholder="请选择是否系统角色">
                    <Select.Option value={1}>是</Select.Option>
                    <Select.Option value={0}>否</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item
                name="sort"
                label="排序"
                rules={[{required: true, message: "请输入排序"}] }
                >
                <InputNumber placeholder="请输入排序" />
            </Form.Item>
        </Form>

    </Modal>;

}